<template>
  <div>
    <nut-navbar :rightShow="false">
      <a slot="back-icon" @click="back()">
        <svg t="1608606282791" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5007" width="23" height="23">
          <path d="M741.711775 210.479759 649.950885 118.718869 256.69022 511.978511 649.950885 905.239176 741.711775 813.478286 440.212 511.978511Z" p-id="5008"></path>
        </svg>
      </a>
      <nut-searchbar ref="myInput" v-model="textvalue" placeText="输入内容" :hasIcon="true" :hasTextButton="true" textInfo="搜索" customClass="search_demo" @submit="search"></nut-searchbar>
    </nut-navbar>
    <div v-if="value == true">
      <after-search :search="textvalue"></after-search>
    </div>
  </div>
</template>

<script>
import AfterSearch from "../components/afterSearch";

export default {
  name: "search",
  data() {
    return {
      textvalue: '',
      value: false
    }
  },
  components: {AfterSearch},
  methods: {
    search() {
      this.value = false;
      setTimeout(() => {
        this.value = true;
      }, 1);

      this.$forceUpdate()
    },
    back() {
      this.$router.push({name: 'index'})
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.$refs.myInput.focus()
    })
  }
}
</script>

<style scoped>
>>> .nut-navbar {
  padding: 10px 0px;
}

>>> .nut-navbar .nav-center .nav-title {
  margin: 0px 20px 0px 40px;
}

>>>.nut-navbar .nav-left{
  margin-top: -12px;
}
</style>
